<template>
  <el-dialog v-model="props.visible" title="直播日历" @close="closeDialog" :center="true" :align-center="true" width="1100px" class="normal-dialog">
    <div class="flex-column" style="max-height: 600px;overflow-y: auto;font-size: 14px">
      <div v-if="liveList.length > 0" v-for="(item, index) in liveList" class="flex-between-center" style="min-height: 70px;background: #F1F1F1;margin: 15px 45px;">
        <div class="flex-start-center">
          <div class="flex-start-center over-hidden" style="width:400px;margin-left: 20px">
            <img style="width: 16px;height: 16px" src="@/assets/images/home/clock-icon.png" alt="">
            <span style="margin-left: 11px">直播时间：{{dayjs(item.startTime).format('YYYY-MM-DD HH:mm')}} 至 {{dayjs(item.endTime).format('HH:mm')}}</span>
          </div>
          <div class="flex-start-center over-hidden" style="width:400px;margin-left: 20px">
            <span class="over-hidden" style="width: 100px">{{item.teacherName}}</span>
            <span :title="item.name" class="over-hidden" style="width: 300px">{{item.name}}</span>
            <span :title="item.courseTypeName" class="over-hidden" style="width: 300px">{{item.courseTypeName}}</span>
          </div>
        </div>
        <div class="flex-all-center" style="margin-right: 20px">
          <el-button v-if="isLiveOver(item.endTime)" class="live-button"  style="color: #676a73;" @click="goPlayBack(item.videoId)">{{item.videoId? '看回放' : ''}}</el-button>
          <el-button v-else class="live-button"  style="color: #676a73;" @click="goLive(item.url)">{{'看直播'}}</el-button>
        </div>
      </div>
      <div v-else class="flex-all-center" style="height: 300px;font-size: 16px">暂无数据</div>
    </div>
  </el-dialog>
</template>

<script setup>
import {defineProps, getCurrentInstance} from "vue";
import {useRoute, useRouter} from 'vue-router';
import {isLaterThanNow} from '../../../utils/common.js'
import dayjs from "dayjs";

const props = defineProps({
  visible: {
   type: Boolean,
   default: false
  },
  courseTypeId: {
    type: Number,
    default: null
  },
  liveList: {
    type: Array,
    default: []
  }
});

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const emits = defineEmits(['closeDialog',])
const isLiveOver = (item) => {
  isLaterThanNow(item)
}

function closeDialog() {
  emits('closeDialog');
}
function goLive(url) {
  window.open(url, '_blank')
}
function goPlayBack(videoId) {
  if(videoId) {
    const { href } = router.resolve({
      path: '/video/play',
      query: {
        id: videoId,
      },
    })
    window.open(href, '_blank')
  }
}

</script>
<style lang="scss" scoped>
.live-button {
  width: 86px;
  font-size: 14px;
  padding: 9px 13px;
  font-weight: 500;
  border-radius: 30px;
  border: 1px #E2E2E2 solid;
  text-align: center;
  align-content: center;
}
</style>

